<template>
  <!-- 搜索条件开始 -->
  <blockquote class="layui-elem-quote">
    <form2 class="layui-form" method="post" id="searchFrm">
      <div class="layui-form-item">
        <div class="layui-inline" v-for="(item, key) in columns">
          <label class="layui-form-label" style="width:auto;min-width: 23px;">{{ i18n.fy[item.label] }}</label>
          <div class="layui-input-inline" v-if="item.type == 'date'">
            <el-date-picker v-model="item.queryValue" type="date" placeholder="" value-format="YYYY-MM-DD HH:mm:ss" />
          </div>
          <div class="layui-input-inline groupRadio" :class="i18n.language + 'group'" v-else-if="item.type == 'radio'">
            <el-radio-group v-model="item.queryValue" class="ml-4">
              <el-radio label="1">{{ i18n.language === 'zh-cn' ? '可用' : "available" }}</el-radio>
              <el-radio label="0">{{ i18n.language === 'zh-cn' ? '不可用' : "Not Available" }}</el-radio>
            </el-radio-group>
          </div>
          <div class="layui-input-inline" v-else>
            <input type="text" v-model="item.queryValue" @input="changeStr(item)" autocomplete="off"
              class="layui-input">
          </div>
        </div>
        <div class="layui-inline">
          <label class="layui-form-label seachlabel"></label>
          <button type="button" @click="query" class="layui-btn layui-btn-normal  layui-icon layui-icon-search"
            id="doSearch">
            {{ i18n.language === 'zh-cn' ? '搜索' : "search" }}
          </button>
        </div>
      </div>
    </form2>
  </blockquote>
</template>

<script setup>
import { i18nStore } from "@/pinia/i18n";
const i18n = i18nStore();

import { ElMessage } from 'element-plus';
let isLoad = ref(false)
let props = defineProps({
  columns: {
    type: Object,
    default: {}
  }
})
let emit = defineEmits(['query'])
const query = () => {
  var queryCondition = {};
  for (let key in props.columns) {
    queryCondition[key] = props.columns[key].queryValue;
  }
  emit('query', queryCondition)
}
const changeStr = (item) => {
  item.queryValue = item.queryValue.replace(/(^\s*)|(\s*$)/g, "");
}
const reset = () => {
  var queryCondition = {};
  for (let key in props.columns) {
    props.columns[key].queryValue = '';
  }
  emit('query', queryCondition)
}
const getSuffix = (name) => {
  let suffix = name.substring(name.lastIndexOf("."))
  if (images.indexOf(suffix) > -1) return {
    type: 1,
    suffix
  }
  if (medias.indexOf(suffix) > -1) return {
    type: 2,
    suffix
  }
}
const beforeAvatarUpload = (rawFile) => {
  if (!getSuffix(rawFile.name)) {
    ElMessage.error(`文件格式不合法，仅支持${medias}${images}`)
    return false
  }
  let maxSize = 10485760
  if (rawFile.size > maxSize) {
    ElMessage.error("文件过大，最大支持10M")
    return false
  }
  return true
}
const httpRequest = ({ file }) => {
  isLoad.value = true
  const formData = new FormData();
  formData.append("file", file);
  $axios.post('/merchant-product/madmin/product/uploadVideo', formData, {
    'Content-type': 'multipart/form-data'
  }).then(res => {
    props.fileList.push(res.data)
    emit('returnUrl', res.data)
    isLoad.value = false
  }).catch(err => {
    isLoad.value = false
  })
}
// 拖拽排序
let dragData = reactive({
  startIndex: null,
  currentIndex: null,
  endIndex: null,
  timer: null
})
const dragstart = (i) => {
  dragData.startIndex = i
}
const dragenter = (e, i) => {
  e.preventDefault();
  clearTimeout(dragData.timer)
  dragData.timer = null
  dragData.currentIndex = i
  dragData.timer = setTimeout(() => {
    let startIndex = dragData.startIndex
    let currentIndex = i
    if (startIndex == currentIndex) return
    let startItem = props.fileList[startIndex]
    props.fileList.splice(startIndex, 1)
    props.fileList.splice(i, 0, startItem)
    dragData.startIndex = currentIndex
  }, 300)
}
const dragend = (e, i) => {
  dragData.startIndex = null
  dragData.currentIndex = null
  dragData.endIndex = null
  clearTimeout(dragData.timer)
  dragData.timer = null
}
const delFile = (index) => {
  props.fileList.splice(index, 1)
}

</script>

<style lang="scss" scoped>
.layui-elem-quote {
  word-break: break-all;
  line-height: 22px;
  border-left: 5px solid #217093;
  border-radius: 0 2px 2px 0;
  background-color: rgb(255 255 255 / 14%);
  display: flex;
  margin: 0;
}

.layui-form-item {
  margin: 15px 0;
  margin-bottom: 15px;
  clear: both;
}

.layui-elem-quote .layui-inline {
  margin: 3px 0;
}

.layui-form-label {
  float: left;
  display: block;
  padding: 9px 15px;
  width: 80px;
  font-weight: 400;
  line-height: 20px;
  text-align: right;
  color: #fff;
}

.layui-input-inline {
  float: left;
  width: 190px;
  margin-right: 10px;
  vertical-align: middle;
}

.layui-input,
.layui-select,
.layui-textarea {
  height: 38px;
  line-height: 1.3;
  line-height: 38px \9;
  border-width: 1px;
  border-style: solid;
  background-color: rgb(255 255 255 / 14%);
  border-radius: 2px;
  padding: 0;
}

.layui-input,
.layui-textarea {
  display: block;
  width: 100%;
  padding-left: 10px;
  color: #fff;
  border-color: #fff;
}

.layui-btn-normal {
  background-color: #1E9FFF;
}

.layui-btn {
  display: inline-block;
  height: 38px;
  line-height: 38px;
  padding: 0 18px;
  background-color: #217093;
  color: #fff;
  white-space: nowrap;
  text-align: center;
  font-size: 14px;
  border: none;
  border-radius: 2px;
  cursor: pointer;

  i {
    font-size: 16px;
    vertical-align: middle;
    margin-left: -5px;
  }
}

.layui-btn+.layui-btn {
  margin-left: 10px;
}

.layui-btn-warm {
  background-color: #FFB800;
}

.layui-inline,
img {
  display: inline-block;
  vertical-align: middle;
}

.layui-btn-normal {
  background-color: #1E9FFF;
}

.seachlabel {
  width: 0px;
  margin-right: -18px;
}

#doSearch {
  cursor: pointer;
}

:deep(#searchFrm .el-input__wrapper) {
  background: none;
  color: #fff;
}

:deep(#searchFrm .el-input__inner) {
  color: #fff;
}

:deep(#searchFrm .el-date-editor.el-input) {
  height: 38px;
}

:deep(.groupRadio .layui-form-radio) {
  display: none;
}

:deep(.groupRadio .el-radio__label) {
  color: red;
}

:deep(.engroup) {
  width: 220px;
}

.ml-4 {
  margin-top: 4px;
}
</style>